<template>
  <div class="layout">
    <nav-header />
    <div class="main-container">
      <div class="content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component
              :is="Component"
              :active-module="activeModule"
              @switch-module="handleModuleSwitch"
            />
          </keep-alive>
        </router-view>
      </div>
    </div>
    <footer-bar />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import NavHeader from '@/components/NavHeader.vue'
import FooterBar from '@/components/FooterBar.vue'

const route = useRoute()
const router = useRouter()
const activeModule = ref('consultations')

const handleModuleSwitch = (module) => {
  activeModule.value = module
  console.log('Module switched to:', module)
}

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    console.log('Route changed:', newPath)
    // 如果是管理页面，确保组件正确加载
    if (newPath === '/staff') {
      console.log('Current active module:', activeModule.value)
      // 强制重新渲染组件
      activeModule.value = 'consultations'
    }
  },
  { immediate: true },
)

onMounted(() => {
  console.log('Layout mounted, current route:', route.path)
  // 如果是管理页面，初始化activeModule
  if (route.path === '/staff') {
    activeModule.value = 'consultations'
  }
})
</script>

<style scoped>
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-container {
  flex: 1;
  display: flex;
  background-color: #f5f7fa;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

@media (prefers-color-scheme: dark) {
  .main-container {
    background-color: #1a1a1a;
  }
}
</style>
